<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理界面</title>
<!--    引入bootstrap的css样式-->
    <link rel="stylesheet" href="./bootvue/css/bootstrap.min.css" >
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">用户管理系统</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">欢迎：xxx</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--导航end-->

<div id="app">
<!--中心布局-->
<div class="container-fluid">
<!--    搜索框-->
    <div class="row">
        <div class="col-md-8 col-md-offset-1">
            <form class="form-inline">
                <div class="form-group">
                    <label for="searchName">姓名：</label>
                    <input type="text" class="form-control" id="searchName" v-model="searchName" placeholder="">
                </div>
                <div class="form-group">
                    <label for="searchEmail">电话：</label>
                    <input type="text" class="form-control" id="searchEmail" v-model="searchCode" placeholder="">
                </div>
<!--     @click.prevent阻止默认行为           -->
                <button type="submit" class="btn btn-info" @click.prevent="searchLike">搜索</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8" style="margin-top: 20px;">
<!--            用户信息展示-->
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>薪资</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
                <tbody>
                    <tr v-for="user,index in users" :key="user.id">
                        <td v-text="user.id"></td>
                        <td v-text="user.name"></td>
                        <td v-text="user.age"></td>
                        <td v-text="user.salary"></td>
                        <td v-text="user.phoneCode"></td>
                        <td><button class="btn btn-danger" @click="delUserInfo(user.id)">删除</button>&nbsp;
                            &nbsp;<button class="btn btn-info" @click="findOneUserInfo(user.id)">修改</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-4">
            <form>
                <div class="form-group">
                    <label for="username">姓名</label>
                    <input type="text" class="form-control" id="username" v-model="user.name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="age">年龄</label>
                    <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
                </div>
                <div class="form-group">
                    <label for="salary">薪资</label>
                    <input type="text" class="form-control" id="salary" v-model="user.salary" placeholder="请输入薪资">
                </div>
                <div class="form-group">
                    <label for="phoneCode">电话</label>
                    <input type="text" class="form-control" v-model="user.phoneCode" id="phoneCode" placeholder="请输入电话">
                </div>
                <button type="submit" class="btn btn-default" @click="saveUserInfo">提交</button>
                <button type="reset" class="btn btn-danger">重置</button>
            </form>
        </div>
    </div>
</div>
</div>

<!--引入vue js-->
<script src="./bootvue/js/vue.min.js"></script>
<!--引入axios js-->
<script src="./bootvue/js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            users:[],//数据赋值应该来源于后端服务接口，在页面加载完成之后就必须完成赋值操作users必须存在数据
            user:{},//数据的双向绑定
            searchName:"", //处理搜索的数据绑定
            searchCode:"", //处理搜索的数据绑定
        },
        methods:{
            //查询一个人的信息
            findOneUserInfo(id){
                let _this = this;
                //根据id查询一个人
                axios.get("http://localhost:8989/users/user/findOne?id="+id).then(function (response) {
                    console.log(response.data);
                    _this.user=response.data;
                });
            },
            //保存用户信息的函数
            saveUserInfo(){
                let _this = this;
                console.log(this.user);
                axios.post("http://localhost:8989/users/user/save", this.user).then(function (response) {
                    console.log(response.data);
                    if(response.data.ok){
                        //更新页面列表
                        // _this.findAll();
                        //清空
                        _this.users='';
                    }else {
                        alert(response.data.message);
                    }
                }).catch(function (err) {
                    console.log(err);
                })
            },
            findAll(){
                let _this = this;
                //发送查询所有用户信息的操作
                axios.get("http://localhost:8989/users/user/findAll").then(function (response) {
                    console.log(response.data);
                    _this.users=response.data;
                }).catch(function (err) {
                    console.log(err);
                })
            },
            //根据id删除用户信息
            delUserInfo(id){
                let _this = this;
                if(window.confirm("确定要删除这条信息吗？")){

                    //axios发异步请求
                    console.log(id);
                    axios.get("http://localhost:8989/users/user/delete?id="+id).then(function (response) {
                        console.log(response.data);
                        if(response.data.status){
                            _this.findAll();
                        }else {
                            alert(response.data.message);
                        }
                    }).catch(function (err) {
                        console.log(err);
                    })
                }
            },
            //处理模糊检索
            searchLike(){
                let _this = this;
                console.log(this.searchName);
                console.log(this.searchCode);
                //code= 注意 一定要有 '='
                axios.get("http://localhost:8989/users/user/findLike?name="+this.searchName+"&code="+this.searchCode).then(function (response) {
                    console.log(response.data);
                    _this.users=response.data;
                });

            }
        },
        //生命2周期相关的函数
        created(){
            let _this = this;
            //发送查询所有用户信息的操作
            axios.get("http://localhost:8989/users/user/findAll").then(function (response) {
                console.log(response.data);
                _this.users=response.data;
            }).catch(function (err) {
                console.log(err);
            })
        }

    })
</script>
</body>
</html>